<script setup lang="ts">
import { Search } from "@element-plus/icons-vue"
import Items from "@/components/business/contact/items.vue"
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
defineProps({
  rightType: { type: String },
})

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const activeName1 = ref("history")
const activeName2 = ref("first")
</script>

<template>
  <el-tabs v-model="activeName1" :class="$style.conversationContent" @tab-click="handleClick">
    <el-tab-pane label="搜索会话内容" name="history">
      <div :class="$style.conversationContent">
        <div class="flex py-2.5 px-[18px]">
          <div :class="{ [$style.active]: activeName2 == 'first' }" class="mr-[6px] px-2 items-center">消息</div>
          <div class="mr-[6px] py-[3px] px-2">文件</div>
          <div class="mr-[6px] py-[3px] px-2">图片/视频</div>
          <div class="mr-[6px] py-[3px] px-2">链接</div>
        </div>
        <div class="px-4 pt-4">
          <el-input placeholder="搜索" :prefix-icon="Search" />
        </div>
        <div class="py-4" :class="$style.context">
          <el-empty description="未匹配到结果！" :image-size="175" class="mt-15"
            image="/images/pages/channel/conversation-zero-icon.png" />
          <items name="比克大魔王" v-if="0" description="你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好"
            :class="$style.item" class="mb-2">
            <template #name>
              <div :class="$style['item-name']">
                <span>比克大魔王</span>
                <time class="ml-3">2023年12月31日</time>
              </div>
            </template>
          </items>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="话术库" name="script">
      <div :class="$style.conversationContent">
        <div class="px-4 pt-4">
          <el-input placeholder="搜索" :prefix-icon="Search" />
        </div>
        <div class="py-4" :class="$style.context">
          <el-empty description="未匹配到结果！" :image-size="175" class="mt-15"
            image="/images/pages/channel/conversation-zero-icon.png" />
          <items name="比克大魔王" v-if="0" description="你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好"
            :class="$style.item" class="mb-2">
            <template #name>
              <div :class="$style['item-name']">
                <span>比克大魔王</span>
                <time class="ml-3">2023年12月31日</time>
              </div>
            </template>
          </items>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>

</template>

<style module lang="scss">
.conversationContent {
  height: calc(100% - 45px);
  --el-color-primary: #1677FF;

  .active {
    background-color: #1677FF;
    border-radius: 2px;
    color: #fff;
  }

  .context {
    height: calc(100% - 88px);
    overflow-x: hidden;
    @include scrollbar;

    .item {
      align-items: flex-start;

      .item-name {
        font-size: 12px;
        color: #8f959e;
        line-height: 16px;
      }
    }
  }
}

:global .el-tabs__header {
  margin: 0
}

:global .el-tabs__nav-wrap {
  padding-left: 22px;
}

:global .el-tabs__item {
  color: #666666
}

:global .is-active {
  color: #1456F0
}

:global .el-tabs__nav-wrap {
  padding: 0 13px;

  &:after {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.16)
  }
}
</style>
